<template>
  <div class="contain">
    <div class="tab">
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane
          label="新增单元"
          name="menu"
          style="background-color: white"
        >
          <el-form v-model="form" label-width="120px">
            <!-- 第一行 -->
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="小区名称" required>
                  <el-input
                    v-model="form.communityname"
                    placeholder="请输入小区名称"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单元名称" required>
                  <el-input
                    v-model="form.unitname"
                    placeholder="请输入单元名称"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第二行 -->
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="栋数" required>
                  <el-input
                    v-model="form.unitnum"
                    placeholder="请输入栋数"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="状态选择" required>
                  <el-select v-model="form.unitstatus" placeholder="请选择">
                    <el-option label="未建成" :value="2"></el-option>
                    <el-option label="已建成" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="咨询问候">
                  <quill-editor
                    v-model="form.unitcontext"
                    style="height: 400px"
                  ></quill-editor>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="rightBtn">
      <el-button type="primary" @click="backhome" class="el-icon-back"
        >返回</el-button
      >
      <br />
      <el-button type="primary" @click="submitForm" class="el-icon-circle-check"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// import TinymceEditor from '@tinymce/tinymce-vue';
export default {
  components: {
    quillEditor,
  },
  name: "menuData",
  data() {
    return {
      form: {
        communityname: "",
        buildingNumber: "",
        unitname: "",
        unitnum: "",
        unitstatus: "",
        greeting: "",
        unitcontext: "",
      },
      formInline: {
        user: "",
        region: "",
      },
      activeName: "menu",
      tableData: [],
      iPagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: [7, 10, 20, 50],
        total: 0,
        page: 0,
        pageSize: 10,
      },
      loading: false,
    };
  },
  // mounted() {
  //   this.getMenuData();
  // },
  created() {
    this.backMessage()
  },
  methods: {
    backhome() {
      this.$router.push({ path: "/house" });
    },
    backMessage(){
      const id = this.$route.query.id
        console.log(id)
        this.$Axios({
        url: "/house/getDetailId",
        method: "get",
        data: {
          id : id
        },
        success: (result) => {
          this.form = result[0]
          this.$message({
            showClose: true,
            message: "成功",
            type: "success",
          });
          // this.$router.push({ path: "/house" });
        },
        error: (error) => {
          this.$message({
            showClose: true,
            message: "失败，请检查输入信息是否正确",
            type: "error",
          });
        },
      })
    },
    submitForm() {
      const  id = this.$route.query.id || 0;
      if(id){
        // 修改
        this.$Axios({
        url: "/house/updateunitList",
        method: "post",
        data: {
          u_id  : this.$route.query.id ,
          communityname: this.form.communityname,
          unitname: this.form.unitname,
          unitnum: this.form.unitnum,
          unitstatus: this.form.unitstatus,
          unitcontext: this.form.unitcontext,
          token: localStorage.getItem("token"),
        },
        success: (result) => {
          this.$message({
            showClose: true,
            message: "成功",
            type: "success",
          });
          this.$router.push({ path: "/house" });
        },
        error: (error) => {
          this.$message({
            showClose: true,
            message: "失败，请检查输入信息是否正确",
            type: "error",
          });
        },
      });
      }else{
        // 添加
        this.$Axios({
        url: "/house/addunitList",
        method: "post",
        data: {
          communityname: this.form.communityname,
          unitname: this.form.unitname,
          unitnum: this.form.unitnum,
          unitstatus: this.form.unitstatus,
          unitcontext: this.form.unitcontext,
          token: localStorage.getItem("token"),
        },
        success: (result) => {
          this.$message({
            showClose: true,
            message: "成功",
            type: "success",
          });
          this.$router.push({ path: "/house" });
        },
        error: (error) => {
          this.$message({
            showClose: true,
            message: "失败，请检查输入信息是否正确",
            type: "error",
          });
        },
      });
      }
      
      // .then((response) => {
      //   // 成功时的逻辑
      //   this.$message({
      //     showClose: true,
      //     message: "成功",
      //     type: "success",
      //   });
      //   this.$router.push({ path: "/house" });
      // })
      // .catch((error) => {
      //   // 失败时的逻辑
      //   this.$message({
      //     showClose: true,
      //     message: "失败，请检查输入信息是否正确",
      //     type: "error",
      //   });
      //   console.error("请求失败:", error);
      // });
    },

    resetForm() {
      this.$refs.form.resetFields();
    },

    // 分页导航
    // handleSizeChange(val) {
    //   this.iPagination.pageSize = val;
    //   this.getMenuData();
    // },
    // handleCurrentChange(val) {
    //   this.iPagination.current = val;
    //   this.getMenuData();
    // },
    // // 获取一级菜单
    // getMenuData() {
    //   this.loading = true;
    //   this.$Axios({
    //     url: "/admin/getMenuData",
    //     method: "get",
    //     data: {
    //       prentId: 0,
    //       currPage: this.iPagination.current - 1,
    //       pageNum: this.iPagination.pageSize,
    //     },
    //     success: (result) => {
    //       this.tableData = result.data;
    //       this.iPagination.total = result.total;
    //       setTimeout(() => {
    //         this.loading = false;
    //       }, 200);
    //     },
    //   });
    // },

    // // 获取二级菜单
    // detail(row) {
    //   console.log(row);
    //   // this.$router.push({ path: "/menu/menuData", query: { parentId: row.id } })
    //   this.$router.push({
    //     name: "menuSecond",
    //     query: {
    //       prentId: row.id,
    //     },
    //   });
    // },
  },
};
</script>

<style scoped>
.block {
  float: right;
  margin-top: 10px;
}
.el-button {
  width: 32%;
  color: #fff;
  font-size: 12px;
  background-color: #20a0ff;
  border-color: #20a0ff;
  margin-left: 34%;
}
.rightBtn {
  position: fixed;
  right: 40px;
  top: 290px;
}
.rightBtn .el-button {
  width: 60px;
  margin: 5px;
}
</style>